<template>
    <!-- 文章列表 -->
    <div class="video-list">
        <ul class="section-video">
            <li
                class="video-item"
                v-for="(item, index) in videoList"
                :key="index"
                @click="goVideo(item)"
            >
                <!-- 上方背景图 -->
                <div class="video-thumbnail">
                    <img
                        :style="{
                            background: `url(${item.articleCover}) center no-repeat`,
                            'background-size': 'cover',
                        }"
                        class="background-image"
                    />
                </div>
                <!-- 内容 -->
                <div class="video-box">
                    <!-- 标题 -->
                    <p class="sub-title-section">
                        <a>{{ item.articleTitle }}</a>
                    </p>
                    <div class="sub-author-section">
                        <!-- 作者 -->
                        <a class="author">
                            <i class="el-icon-s-custom"></i>
                            {{ item.author }}
                        </a>
                    </div>
                    <div class="sub-playinfo-section">
                        <!-- 播放 -->
                        <a class="author">
                            <i class="el-icon-video-play"></i>
                            {{ item.readingQuantity }}
                        </a>
                        <a class="author">
                            <i class="el-icon-s-comment"></i>
                            {{ item.commentCount }}
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { mixin } from "@/mixins";
export default {
    name: "video-list",
    mixins: [mixin],
    props: ["videoList"],
    methods: {
        goVideo(item) {
            // 视频详情
            this.$router.push({
                name: "video-item",
                params: { id: item.id },
            });
            // 刷新页面
            window.location.reload();
        },
    },
};
</script>
<style lang="scss" scoped>
@use "../assets/css/video-list.scss";
</style>
